<template>
  <view class="layout">
    <view class="logo">
      <img class="logo" src="../../static/question/logo.png" alt="" />
    </view>
    <view class="juzhong title" style="margin-bottom: 10rpx">{{ title }}</view>
    <ul class="tips" style="list-style-type: disc">
      <!-- <view class="dot">•</view> -->
      <view class="content flex"
        ><view class="dot">•</view>{{ content1[0] }}</view
      >
      <view class="content flex"
        ><view class="dot">•</view>{{ content1[1] }}</view
      >
      <view class="content flex" style="margin-bottom: 40rpx"
        ><view class="dot">•</view>{{ content1[2] }}</view
      >
    </ul>
    <view class="small_title"> 反馈类型 </view>
    <view class="center" style="justify-content: space-between">
      <view
        class="module_common"
        v-for="(item, index) in choose"
        :key="index"
        :class="{
          module_check: selectedIndex === index,
          module_common: selectedIndex !== index,
        }"
        @click="toggleSelect(index)"
        style="padding-top: 10rpx"
      >
        <img
          style="background-color: transparent"
          class="module_img"
          :src="item.url"
          alt=""
        />
        <view class="feedback_name center">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="feedback_input">
      <input
        v-model="content"
        type="text"
        placeholder="请详细描述您的建议或反馈..."
      />
    </view>
    <view class="small_title"> 联系方式（选填） </view>
    <view class="contact">
      <input
        v-model="contactInfo"
        type="text"
        placeholder="请留下您的联系方式，方便我们及时回复"
      />
    </view>

    <view class="tip_bottom">
      <view class="content" style="text-indent: 40rpx">{{ promise }}</view>
      <view style="text-indent: 40rpx; color: rgba(110, 88, 170, 1)">{{
        send_gift
      }}</view>
    </view>

    <view class="submit_button center" @click="submit"> 提交反馈 </view>
  </view>
</template>

<script>
import request from "../../apis/question.js";

export default {
  data() {
    return {
      title: "感谢您的参与，让我们做的更好!",
      content1: [
        "如果您在使用过程中遇到任何问题，我们希望您能告诉我们，以便我们迅速解决。",
        "如果您有任何改进的想法或建议，我们非常期待听到，因为您的创意可能会让我们的产品更加出色。",
        "即使是微小的改进点，也能让我们的服务更上一层楼。",
      ],
      promise:
        "我们承诺，您的每一条反馈都会被我们团队认真阅读和慎重思考，并用于推动我们小程序的持续优化。让我们携手共创更加完善的用户体验。",
      send_gift:
        "我们会挑选提交过优质反馈内容的用户，赠送本程序会员和精美礼品!",
      tip_input: "您只需在下方输入反馈内容，点击“提交”即可完成反馈。",
      content: "",
      contactInfo: "",
      choose: [
        { url: "../../static/question/1.png", name: "功能建议" },
        { url: "../../static/question/2.png", name: "体验反馈" },
        { url: "../../static/question/3.png", name: "其他" },
      ],
      checked_name: "",
      choose_name: ["功能建议", "体验反馈", "其他"],
      selectedIndex: 0,
    };
  },
  methods: {
    // 点击事件处理函数
    toggleSelect(index) {
      // 如果点击的是同一个项，取消选中，否则选择它
      console.log("check", index);
      this.selectedIndex = this.selectedIndex === index ? null : index;
    },
    async send_request() {
      try {
        const res = await request.recall({
          type: this.choose_name[this.selectedIndex],
          content: this.content,
          contactInfo: this.contactInfo,
          designatedID: uni.getStorageSync("userInfo").uid,
        });
        console.log("res", res);
        if (res.message == null) {
          uni.showModal({
            // title: '内容不完整',
            content: "提交成功",
            showCancel: false,
            confirmText: "确认",
          });
          this.contactInfo = "";
          this.content = "";
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      } catch (e) {
        console.log(e);
        uni.showToast({
          title: "请求失败",
          icon: "none",
        });
      }
    },
    submit() {
      if (this.content === "") {
        uni.showModal({
          // title: '内容不完整',
          content: "请填写反馈内容",
          showCancel: false,
          confirmText: "确认",
        });
      } else {
        this.send_request();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}
.dot {
  font-size: 50rpx;
  margin-right: 10rpx;
}
.submit_button {
  width: 540rpx;
  height: 96rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(110, 88, 170, 1);
  font-size: 40rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 52rpx;
  color: rgba(255, 255, 255, 1);
  margin: 20rpx auto;
}
.box {
  opacity: 1;
  border-radius: 10rpx;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(121, 72, 234, 0.5);
}
.feedback_name {
  /** 文本1 */
  font-size: 28rpx;
  font-weight: 400;
  line-height: 36rpx;
  color: rgba(110, 88, 170, 100);
}
.tip_bottom {
  // height: 180rpx;
  padding: 20rpx;
  // padding-right: 20rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(110, 88, 170, 0.2);
}
.logo {
  width: 180rpx;
  height: 180rpx;
  margin: 20rpx auto;
}

.feedback_input {
  height: 234rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(217, 217, 217, 0.2);
  border: 1px solid rgba(217, 217, 217, 1);
  margin: 20rpx auto;
  padding-left: 22rpx;
}
.contact {
  height: 50rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(217, 217, 217, 0.2);
  border: 1px solid rgba(217, 217, 217, 1);
  margin: 20rpx auto;
  padding-left: 22rpx;
}
.small_title {
  /** 文本1 */
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 38rpx;
  color: rgba(110, 88, 170, 1);
  text-align: left;
}
.layout {
  height: 100%;
  padding: 20rpx 30rpx;
  background: rgba(110, 88, 170, 0.02);
  font-family: "优设标题黑";
  font-weight: 900;
}
.module_common {
  width: 160rpx;
  height: 108rpx;
  opacity: 1;
  border-radius: 4px;
  border: 1px solid rgba(124, 124, 126, 1);
}
.module_check {
  width: 160rpx;
  height: 108rpx;
  opacity: 1;
  border-radius: 4px;
  background: rgba(110, 88, 170, 0.2);
  border: 1px solid rgba(110, 88, 170, 1);
}
.module_img {
  width: 50rpx;
  height: 50rpx;
}
.tips {
  opacity: 1;
  border-radius: 10rpx;
}
.input_box {
  width: 100%;
  height: 300rpx;
  opacity: 1;
  border-radius: 10rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 20rpx;
  border: 1px solid rgba(121, 72, 234, 0.5);
}
.content {
  font-size: 32rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 42rpx;
  color: rgba(124, 124, 126, 1);
  text-align: left;
  vertical-align: top;
}
.juzhong {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  /** 文本1 */
  font-size: 50rpx;
  font-weight: 400;
  // letter-spacing: 0px;
  line-height: 60.96rpx;
  color: rgba(110, 88, 170, 1);
  font-family: "优设标题黑";
}
.feature-list {
  font-weight: 400;
  // color: @black-color;
  font-size: 16px;
  line-height: 30px;
  margin-left: 1rem;
  list-style-type: disc;
  ul {
    margin-left: 1rem;
    list-style-type: circle;
  }
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
